<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual List Demo</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="app">
        <!-- 头部按钮区域 -->
        <div class="button-warp">
            <button @click="addItem">添加</button>
            <button @click="removeItem">删除</button>
            <p>总高度: {{ totalHeight }}px</p>
            <p>行高: {{ itemHeight }}px</p>
            <p>滚动位置: {{ Math.round(scrollTop) }}px</p>
            <p>可见行数: {{ visibleRows.length }}</p>
        </div>  
        
        <!-- 虚拟列表容器 -->
        <div class="list-warp" @scroll="onScroll" style="height: 400px; overflow-y: auto; border: 1px solid #ccc; position: relative;">
            <!-- 总高度占位 -->
            <div :style="{ height: totalHeight + 'px', position: 'relative' }">
                <!-- 可见行 - 使用绝对定位 -->
                <li 
                    v-for="(item, index) in visibleRows" 
                    :key="Math.floor(scrollTop / itemHeight) + index"
                    class="item"
                    :style="{
                        position: 'absolute',
                        top: (Math.floor(scrollTop / itemHeight) + index) * itemHeight + 'px',
                        left: 0,
                        right: 0,
                        height: itemHeight + 'px',
                        lineHeight: itemHeight + 'px',
                        padding: '0 10px',
                        borderBottom: '1px solid #eee',
                        boxSizing: 'border-box'
                    }"
                >
                    {{ item }}
                </li>
            </div>
        </div>
    </div>
    <script src="index.js" type="module"></script>
</body>
</html>